<template>
	<view class="trend">
		<!-- 头部导航 -->
		<view class="w-750 w-bj-white" style="position: fixed; top: 0; left: 0; z-index: 999;">
			<view class="h-100 w-row-justify-between-align">
				<view class="wh-80 w-row-center" @click="routerBack()">
					<image class="wh-40" src="../../../static/gane/goBack-icon.png"></image>
				</view>
				<view class="flex1 h-100 w-row-center w-wz-conts font-36">
					<text>{{typeText[type-1]}}</text>
				</view>
				<view class="wh-80 w-row-center">
					<!-- <uni-datetime-picker type="datetimerange" @change="changeTiem">
						<image class="wh-50" src="../../../static/gane/rq.png"></image>
					</uni-datetime-picker> -->
				</view>
			</view>
		</view>
		<view class="bwh-120"></view>
		<!-- 头部导航结束 -->
		
		<view class="content-box padding-top-xs">
			<view class="bg-white full-width fl trend-cell">
				<view class="items">
					<view class="w-30 text-bold item">
						期数
					</view>
					<view class="w-20 text-bold item">
						开奖号码
					</view>
					<view class="w-20 text-bold item">
						和值
					</view>
					<view class="w-15 text-bold item">
						极大小
					</view>
					<view class="w-15 text-bold item">
						豹对顺
					</view>
				</view>
				
				<view class="items" v-for="(item,index) in tableData" :key="index">
					<view class="w-30 text-bold item">
						{{item.issue}}
					</view>
					<view class="w-20 text-bold item">
						{{item.numarr.join(',')}}
					</view>
					<view class="w-20 text-bold item">
						<text>{{item.bet_tema}}</text>
						<block v-for="name in item.bet_name">
							<block v-if="!['极大','极小','豹子','对子','顺子'].includes(name) && name.length==1">
								,<text class="text-color-red" v-if="name=='大'">{{name}}</text>
								<text class="text-color-green" v-if="name=='小'">{{name}}</text>
								<text class="text-color-green" v-if="name=='单'">{{name}}</text>
								<text class="text-color-red" v-if="name=='双'">{{name}}</text>
							</block>
						</block>
						
					</view>
					<view class="w-15 text-bold item">
						<block v-for="name in item.bet_name">
							<text v-if="['极大','极小'].includes(name)">{{name}}</text>
						</block>
						<text v-if="!['极大','极小'].some(item2 => item.bet_name.includes(item2))">-</text>
					</view>
					<view class="w-15 text-bold item">
						<block v-for="name in item.bet_name">
							<text v-if="['豹子','对子','顺子'].includes(name)">{{name}}</text>
						</block>
						<text v-if="!['豹子','对子','顺子'].some(item2 => item.bet_name.includes(item2))">-</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/pages/common/request.js'
	export default {
		data () {
			return {
				typeText: ['新澳门28', '加拿大28', '澳门28', '香港28','亚洲28','俄罗斯28','新加坡28','欧洲28','澳洲28','墨西哥28','台湾28','加拿大28','阿根廷28','荷兰28'],
				tableData: [],
				total: 0,
				start_time: '',
				end_time: '',
				pagenum: 1,
				type: 1,
				ispage: false
				
			}
		},
		onLoad(option) {
			this.type = option.type || 1
			this.getUserAgentLog()
		},

		onReachBottom() {
		
			uni.showLoading({
				title: '加载数据中...'
			});
			this.pagenum++
			let timer = setInterval(() => {
				uni.hideLoading();
				if (this.tableData.length == this.total) {
					this.ispage = true
				} else {
					this.getUserAgentLog()
				}
				clearTimeout(timer)
			}, 600);
		
		},
		methods:{
			getUserAgentLog(isbool) {
        const urlArr = ['/app_user_aozhou_redord', '/app_user_jianada_redord', '/app_user_xinjiapo_redord',
          '/app_user_aomenjisu_redord','/app_user_kl28_redord','/app_user_kl28_redord','/app_user_kl28_redord','/app_user_kl28_redord',
		  '/app_user_kl28_redord','/app_user_kl28_redord','/app_user_kl28_redord','/app_user_kl28_redord','/app_user_kl28_redord',
		  '/app_user_kl28_redord','/app_user_kl28_redord'
        ]
				$H.post(urlArr[this.type-1], {
					pagenum: this.pagenum,
					start_time: this.start_time,
					end_time: this.end_time,
          type: this.type
				}).then((res) => {
					console.log(res)
					if (res.code == 200) {
						if (isbool) {
							if (res.data.data.length == 0) {
								this.tableData = []
							} else {
								this.tableData.push(...res.data.data)
							}
						} else {
							this.tableData.push(...res.data.data)
							this.total = res.data.total
						}
			
			
					} else {
						return uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.w-row-center {
		color: #323233 !important;
	}
	.trend-cell{
		.items{
			width: 100%;
			display: flex;
		}
		.item{
			    float: left;
			    line-height: 8vw;
			    padding: 0 1.33333vw;
			    border-top: 1px solid #eee;
			    border-left: 1px solid #eee;
			    text-align: center;
				
				&>span{
					margin-left: 10rpx;
				}
		}
		
		.w-30 {
		    width: 30%;
		}
		
		.w-20 {
		    width: 20%;
		}
		
		.w-15 {
		    width: 15%;
		}
	}
</style>